<template>
  <div class="home">
    <Background />
    <div class="sections">
      <Section
        v-for="(item, index) in moduleList"
        :key="index"
        :title="item.name"
        :details="item.description"
        :show="item.show"
        @click="showDetails(item)"
      />
    </div>
    <Butterfly @click="butterflyClicked" />
    <Flower
      v-for="(item, indexs) in flowerList"
      :key="index"
      :isOpen="item.show"
      :flowerImage="item.src"
      :style="item.style"
      :name="item.name"
      :flowerDescription="item.description"
      @click="flowerClick(item)"
    />
  </div>
</template>

<script setup>
import Background from "../components/Background.vue";
import Section from "../components/Section.vue";
import Butterfly from "../components/Butterfly.vue";
import Flower from "../components/Flower.vue";
import {createSpeech,editArray} from '../utils/util.js'
import { ref, reactive } from "vue";
let speech = null; // 用于存储语音合成对象
const moduleList = reactive([
  { name: "Module 1", description: "This is the first module.", show: false },
  { name: "Module 2", description: "This is the second module.", show: false },
  { name: "Module 3", description: "This is the third module.", show: false },
  { name: "Module 4", description: "This is the fourth module.", show: false },
  { name: "Module 5", description: "This is the fifth module.", show: false },
]);
const flowerList = reactive([
  {
    name: "flower1",
    show: false,
    description: "this is flower1",
    src: "",
    style: {
      position: "absolute",
      bottom: "20px",
      left: "20px",
    },
  },
  {
    name: "flower2",
    show: false,
    description: "this is flower2",
    src: "",
    style: {
      position: "absolute",
      bottom: "20px",
      left: "200px",
    },
  },
  {
    name: "flower3",
    show: false,
    description: "this is flower3",
    src: "",
    style: {
      position: "absolute",
      bottom: "20px",
      left: "400px",
    },
  },
  {
    name: "flower4",
    show: false,
    description: "this is flower4",
    src: "",
    style: {
      position: "absolute",
      bottom: "20px",
      left: "600px",
    },
  },
]);
const showDetails = (details) => {
  moduleList = editArray(moduleList,details)
  speech = createSpeech(details.description)
};

const flowerClick = (flower) =>{
  flowerList = editArray(flowerList,flower)
  speech =  createSpeech(flower.name +  flower.description, speech)
}
</script>

<style>
.home {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.sections {
  position: absolute;
  top: 50px;
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-around;
}
</style>
